<template>
  <!--  关于我们详情页 -->
  <div class="Index">
    <Head :chuang="ConName" />
    <full-page :options="options" ref="fullpage" class="fullpage">
      <div class="section" :style="'height:' + fullHeight + 'px;'">
        <div class="page">
          <OnePage></OnePage>
        </div>
      </div>
      <div class="section" :style="'height:' + fullHeight + 'px;'">
        <div class="page">
          <TwoPage></TwoPage>
        </div>
      </div>
      <!-- <div class="section" :style="'height:' + fullHeight + 'px;'">
        <div class="page">
          <ThreePage></ThreePage>
        </div>
      </div> -->
      <div class="section" :style="'height:' + fullHeight + 'px;'">
        <div class="page">
          <FourPage></FourPage>
        </div>
      </div>
    </full-page>
  </div>
</template>

<script>
import Head from '../../components/Head.vue';
import OnePage from './OnePage.vue';
import TwoPage from './TwoPage.vue';
import FourPage from './FourPage.vue';

export default {
  components: {
    Head,
    OnePage,
    TwoPage,
    FourPage
  },
  name: 'Home',
  data() {
    return {
      ConName: '关于我们',
      fullHeight: document.documentElement.clientHeight,
      options: {
        licenseKey: 'OPEN-SOURCE-GPLV3-LICENSE',
        afterLoad: this.afterLoad,
        scrollOverflow: true,
        scrollBar: false,
        css3: true,
        // menu: '#menu',
        navigation: true, //是否顯示導航
        // anchors: ['index', 'prod', 'plan', 'ex' ,'abt', 'news'],
        sectionsColor: [
          '#41b883',
          '#ff5f45',
          '#0798ec',
          '#fec401',
          '#1bcee6',
          '#ee1a59',
          '#2c3e4f',
          '#ba5be9',
          '#b4b8ab'
        ]
      }
    };
  },
  watch: {
    fullHeight(val) {
      if (!this.timer) {
        this.fullHeight = val;
        this.timer = true;
        let that = this;
        setTimeout(function () {
          that.timer = false;
        }, 400);
      }
    }
  },
  methods: {
    next() {
      // 往下切换
      this.$refs.fullpage.api.moveSectionDown();
    },
    get_bodyHeight() {
      const that = this;
      window.onresize = () => {
        return () => {
          window.fullHeight = document.documentElement.clientHeight;
          that.fullHeight = window.fullHeight;
        };
      };
    }
  },
  created() {
    this.get_bodyHeight();
  }
};
</script>
<style>
#fp-nav ul li a span {
  background: rgb(255, 255, 255) !important;
}
</style>
<style lang="less">
.Index {
  height: auto;
  .fullpage {
    height: auto;
  }
}
</style>
<style scoped>
.section >>> .page {
  height: 100% !important;
}
</style>
